<template>
  <div>
    <div class="header">
      <div class="header_img"><div @click="back()" class="IMG"></div></div>
      <div class="title">资金账户</div>
      <div class="save">管理</div>
    </div>
    <div class="base_content">
      <img src="../../assets/images/accbg@2x.png" alt="">
      <div class="top_tiao"></div>
      <p class="money pos">余额（¥）</p>
      <p class="num pos">0</p>
      <p class="record pos">查看交易记录</p>
      <button class="cz pos"><font>充值</font></button>
      <button class="tx pos"><font>提现</font></button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "account",
    data(){
      return{
      }
    },
    methods: {
      back() {
        window.webkit.messageHandlers.account.postMessage({});
      },
    }
  }
</script>

<style scoped>
  .header {
    box-sizing: border-box;
    position: relative;
    display: flex;
    height: 90px;
    background-color: #8ec43e;
    align-items: center;
    padding: 0 30px;
  }

  .header_img {
    flex:1;
  }

  .title {
    text-align: center;
    flex: 1;
    font-size: 34px;
    color: #ffff;
  }

  .save {
    text-align: right;
    font-size: 28px;
    color: #ffffff;
    flex: 1;
  }
  .base_content{
    width: 690px;
    height: 964px;
    border-radius: 10px;
    margin: 80px 30px 0 30px;
    position: relative;
  }
  .base_content img{
    width: 100%;
    height:100%;
  }
  .base_content .top_tiao{
    width:500px;
    height: 8px;
    border-radius: 4px;
    background: rgba(142,196,62,1);
    position: absolute;
    top: 50px;
    left: 95px;
  }
  .base_content .pos{
    position: absolute;
  }
  .base_content .money{
    font-size: 30px;
    font-weight: bold;
    color:rgba(142,196,62,1);
    top: 180px;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
  }
  .base_content .num{
    font-size: 100px;
    font-weight: 500;
    color: rgba(250,147,55,1);
    top: 260px;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
  }
  .base_content .record{
    font-size: 24px;
    font-weight: 400;
    color: rgba(142,196,62,1);
    top: 480px;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    text-decoration: underline;
  }
  button font{
    color: #fff;
    font-size: 30px;
  }
  .cz{
    width:500px;
    height: 80px;
    border-radius: 10px;
    background: rgba(142,196,62,1);
    top: 672px;
    left: 95px;
  }
  .tx{
    width:500px;
    height: 80px;
    border-radius: 10px;
    background: rgba(250,147,55,1);
    top: 782px;
    left: 95px;
  }
</style>
